<template>
  <div>
    <h1 v-if="name.length < 4">hello world{{ name }}</h1>
    <h2 v-show="name.length < 4">hello world{{ name }}</h2>
    <div v-html="str"></div>
    <div v-text="str"></div>
    <input type="text" v-model="name">
    <ul>
      <li v-for="(item, index)  in  ary" :key="item">{{ index }}--{{ item }}</li>
      <li v-for="(value, key) of obj">{{ value }}</li>
    </ul>
    <ul v-pre>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
    </ul>
  </div>
</template>
<script>
/* 
  Vue中的指令： 就是一些v-xxx的行内属性
  v-model 一般用在表单元素或者组件

  // 不常用的
    v-cloak 为了解决小胡子的显示问题  这个指令vue渲染完成之后会删除这个行内属性；工程化中没有
    v-pre 他是一个优化的指令
    v-html  利用的就是原生的innerHTML; 
    v-text  利用的就是原生的innerText

  
  //常用的
  v-show 
  v-if
  这两者后跟的都会转成一个布尔类型
  v-show 是控制了元素的显示隐藏 有较大的初始加载开销
  v-if 控制的是元素的加载   有较大的切换开销
  v-else-if
  v-else

  v-for 循环展示标签的一个指令  可以用来循环 “数组”  对象 数字 字符串

*/
export default {
  data() {
    // 要求必须是函数返回一个对象的格式： 为了保证组件数据的独立性
    return {
      name: "珠峰",
      str: '<i>666</i>',
      ary: [111, 222, 333, 444],
      obj: {
        q: 1, w: 2, e: 3
      }
    }
  },
  created() {
    console.log(this)
  }
}
</script>
